<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
    <style>
        #form-title {
            display: inline-block;
            width: 100%;
            border: 0;
            outline: none;
            border-bottom: none;
            margin: 20px 0;
            color: #222;
            font-size: 24px;
            box-sizing: border-box;
            padding: 0 10px;
        }
    </style>
</head>
<body th:fragment="common/hasbei_text">


<div class="container">


    <div id="mytext" style="display:none;">
        <input type="text" id="form-title" maxlength="100" placeholder="请输入文章标题（5-100个汉字）">
        <div id="editor" style="width: 800px">
            <p id="myplaceholder" style="color: #999">请输入相关口腔文章、资讯内容</p>
        </div>
        <div style="font-size: 13px;">
            字数：<span id="textlength">0</span>
        </div>
    </div>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/js/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        editor.customConfig.onchange = function (text) {
            // html 即变化之后的内容
            $("#textlength").text(editor.txt.text().length)
        }
        editor.customConfig.customUploadImg = function (files, insert) {
            // files 是 input 中选中的文件列表
            // insert 是获取图片 url 后，插入到编辑器的方法

            // 上传代码返回结果之后，将图片插入到编辑器中
            insert(imgUrl)
        }


        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()

        $("#editor").click(function () {
            $("#myplaceholder").text("");
        })
    </script>




</div>
</body>
</html>